<template>
	<!-- 项目看板 -->
	<div class="property-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
			<div class="property-main">
				<!-- 左边 -->
				<div class="dataScreen-lf">
					<!-- 项目经营 -->
					<div class="lf-top">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['项目经营']">
						</ItemTitel>
						<div class="lf-top-cn">
							<projectChart ref="projectChartRef"></projectChart>
						</div>
					</div>
					<!-- 设计阶段情况 -->
					<div class="lf-second">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['设计阶段情况']">
						</ItemTitel>
						<div class="lf-second-cn">
							<div class="second-box">
								<div v-for="item in leftData" class="second-item">
									<div class="icon-item">
										<img :src="item.src" alt="" />
									</div>
									<div class="desc-text">
										<div>
											<span class="textColor">{{ item.title }}</span>
										</div>
										<div>
											<span>{{ item.num }}</span>
											<span class="textColor">{{ item.unit }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 业务阶段情况 -->
					<div class="lf-third">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['业务阶段情况']">
						</ItemTitel>
						<div class="lf-third-cn">
							<div v-for="item in circleData" class="third-item">
								<div class="border-box">
									<div class="title-item">
										<span>{{ item.titlle }}</span>
										<span>{{ item.titlle2 }}</span>
									</div>
									<div class="num-item">
										<span class="stateColor">{{ item.num }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 投资项目预测 -->
					<div class="lf-bottom">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['投资项目预测']">
						</ItemTitel>
						<div class="lf-bottom-cn">
							<div class="input-box">
								<span>行业</span>
								<!-- teleported  下拉菜单是否使用teleport插入body元素 -->
								<el-select
									class="selectTool"
									popper-class="screen-select-popper-style"
									size="small"
									@change="inputEvent"
									v-model="selectValue"
									placeholder="请输入"
									:teleported="false"
									filterable
									clearable
								>
									<el-option
										v-for="item in selectOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
							</div>
							<div class="table-box">
								<scroll-board
									:config="configData"
									:style="{ width: '100%', height: tableHeight + 'px' }"
									@click="handleDetail"
								/>
								<!-- <el-table
									:data="tableData"
									style="width: 100%"
									:max-height="tableHeight"
									header-row-class-name="table-head"
									row-class-name="table-row"
								>
									<el-table-column prop="corporate_name" label="公司名称" />
									<el-table-column prop="investment_name" label="投资名称" />
									<el-table-column>
										<template #default="scope">
											<el-button
												size="small"
												link
												@click="handleDetail(scope.$index, scope.row)"
											>
												查看详情
											</el-button>
										</template>
									</el-table-column>
								</el-table> -->
							</div>
						</div>
					</div>
				</div>
				<!-- 中间 -->
				<div class="dataScreen-ct">
					<div class="ct-top">
						<div class="ct-top-cn">
							<div class="ct-top-line1">
								<div v-for="item in rowArr1" class="line1-item">
									<div class="left-icon">
										<img :src="item.src" alt="" />
									</div>
									<div class="right-desc">
										<div class="img">
											<img :src="item.title" alt="" />
											<div>
												<img :src="getSign(item.sign)" alt="" />
												<span
													:style="{
														color: item.sign === 'up' ? '#10FF0E' : '#F50000',
													}"
												>
													{{ item.rate }}%
												</span>
											</div>
										</div>
										<div class="text">
											<span class="numColor">{{ item.value }}</span>
											<span class="numColor unit">{{ item.unit }}</span>
										</div>
									</div>
								</div>
							</div>
							<div class="ct-top-line2">
								<div v-for="item in rowArr2" class="line2-item">
									<div class="left-icon">
										<img :src="item.src" alt="" />
									</div>
									<div class="right-desc">
										<img :src="item.title" alt="" />
										<div class="text">
											<span
												class="numColor"
												:class="item.sign === 'normal' ? 'normal' : 'abnormal'"
											>
												{{ item.value }}
											</span>
											<span
												class="numColor unit"
												:class="item.sign === 'normal' ? 'normal' : 'abnormal'"
											>
												{{ item.unit }}
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ct-bottom">
						<div class="ct-bottom-cn">
							<mapBox :map-data="mapData" :show-info="false"></mapBox>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="dataScreen-rg">
					<div class="dataScreen-top">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['投资阶段情况']">
						</ItemTitel>
						<div class="rg-top-cn">
							<div v-for="item in rightData['top']" class="list-common">
								<div class="item-head">
									<span>{{ item.head.title }}：</span>
									<span>{{ item.head.value }}</span>
									<span class="unit">个</span>
								</div>
								<div class="item-content">
									<div
										v-for="itemObj in item.content"
										:class="itemObj.type ? `${itemObj.type}` : ''"
									>
										<span>{{ itemObj.title }}：</span>
										<span>{{ itemObj.value }}</span>
										<span class="unit">个</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="dataScreen-center">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['建设阶段情况']">
						</ItemTitel>
						<div class="rg-center-cn">
							<div v-for="item in rightData['center']" class="list-common">
								<div class="item-head">
									<span>{{ item.head.title }}：</span>
									<span>{{ item.head.value }}</span>
									<span class="unit">个</span>
								</div>
								<div class="item-content">
									<div
										v-for="itemObj in item.content"
										:class="itemObj.type ? `${itemObj.type}` : ''"
									>
										<span>{{ itemObj.title }}：</span>
										<span>{{ itemObj.value }}</span>
										<span class="unit">个</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="dataScreen-bottom">
						<ItemTitel :itemTitleImg="postItemTitleImgObj['招标阶段情况']">
						</ItemTitel>
						<div class="rg-bottom-cn">
							<div v-for="item in rightData['bottom']" class="list-common">
								<div class="item-head">
									<span>{{ item.head.title }}：</span>
									<span>{{ item.head.value }}</span>
									<span class="unit">个</span>
								</div>
								<div class="item-content">
									<div
										v-for="itemObj in item.content"
										:class="itemObj.type ? `${itemObj.type}` : ''"
									>
										<span>{{ itemObj.title }}：</span>
										<span>{{ itemObj.value }}</span>
										<span class="unit">个</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import ScreenHeader from "../components/ScreenHeader";
import { getScale } from "../utils/handelScreen";
import ItemTitel from "../property/components/ItemTitel";
import projectChart from "./components/projectChart.vue";
import { ElTable, ElSelect, ElOption } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import mapBox from "../property/components/map.vue";

import {
	xmjy,
	sjjdqk,
	ywjdqk,
	getFiledList,
	tzjdqk,
	zbjdqk,
	jsjdqk,
	tzxmyc,
	xmzl,
	dt,
} from "./service";

const currentYear = new Date().getFullYear();
const postTitleImg = require("@/assets/screenImg/projectImg/headTitle.png");
const postItemTitleImgObj = reactive({
	项目经营: require("@/assets/screenImg/projectImg/title1.png"),
	设计阶段情况: require("@/assets/screenImg/projectImg/title2.png"),
	业务阶段情况: require("@/assets/screenImg/projectImg/title3.png"),
	投资项目预测: require("@/assets/screenImg/projectImg/title4.png"),
	投资阶段情况: require("@/assets/screenImg/projectImg/title5.png"),
	建设阶段情况: require("@/assets/screenImg/projectImg/title6.png"),
	招标阶段情况: require("@/assets/screenImg/projectImg/title7.png"),
});

// 左边
let leftData = ref([
	{
		src: require("@/assets/screenImg/commonImg/blueBook.png"),
		title: "设计项目数量",
		num: 0,
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/commonImg/blueBook.png"),
		title: "重点项目数量",
		num: 0,
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/commonImg/redBook.png"),
		title: "异常项目数量",
		num: 0,
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/commonImg/blueBook.png"),
		title: "进行中项目数量",
		num: 0,
		unit: "个",
	},
]);

const fetchLeftTop = () => {
	xmjy({ year: currentYear })
		.then((resp) => {
			screenChartObj.chart1 = projectChartRef.value?.initManageChart(resp);
		})
		.catch((e) => {});
};
const fetchLeftTop2 = () => {
	sjjdqk({ year: currentYear })
		.then((resp) => {
			const { design = 0, keynote = 0, abnormal = 0, ongoing = 0 } = resp || {};
			leftData.value[0].num = design;
			leftData.value[1].num = keynote;
			leftData.value[2].num = abnormal;
			leftData.value[3].num = ongoing;
		})
		.catch((e) => {});
};
const fetchLeftTop3 = () => {
	ywjdqk({ year: currentYear })
		.then((resp) => {
			const {
				normal = 0,
				business = 0,
				keynote = 0,
				extension = 0,
				termination = 0,
			} = resp || {};
			circleData.value[0].num = normal;
			circleData.value[1].num = business;
			circleData.value[2].num = keynote;
			circleData.value[3].num = extension;
			circleData.value[4].num = termination;
		})
		.catch((e) => {});
};
const fetchLeftTop4 = (filed = "") => {
	tzxmyc({ filed })
		.then((resp = []) => {
			tableData.value.splice(0);
			tableData.value.push(...resp);
			configData.value.data = resp.map((item) => {
				return [
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.corporate_name}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216,240,255,0.8);">${item.investment_name}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #36e3e3;text-decoration: underline;text-underline-offset: 5px;cursor:pointer;">查看详情</span>`,
				];
			});
		})
		.catch((e) => {});
};

const fetchSelectOptions = () => {
	getFiledList()
		.then((resp = []) => {
			selectOptions.value.splice(0);
			selectOptions.value.push(
				...resp.map(({ filed }) => ({ value: filed, label: filed }))
			);
		})
		.catch((e) => {});
};

let circleData = ref([
	{
		titlle: "正常",
		titlle2: "项目数",
		num: 0,
	},
	{
		titlle: "业务",
		titlle2: "项目数量",
		num: 0,
	},
	{
		titlle: "重点",
		titlle2: "项目数量",
		num: 0,
	},
	{
		titlle: "延期",
		titlle2: "项目数",
		num: 0,
	},
	{
		titlle: "终止",
		titlle2: "项目数",
		num: 0,
	},
]);
let selectOptions = ref([]);
let selectValue = ref("");
let inputEvent = (val) => {
	fetchLeftTop4(val);
};

let tableHeight = ref();
let calcHeight = (className) => {
	let el = document.getElementsByClassName(className);
	if (el) {
		return el[0].clientHeight;
	} else {
		return 0;
	}
};
let tableData = ref([]);
let configData = ref({
	header: [
		`<span style='color:#d4edfd;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>公司名称</span>`,
		`<span style='color:#d4edfd;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>投资名称</span>`,
		`<span></span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: ["center", "center", "center"],
	rowNum: 3,
});
let handleDetail = (index, row) => {
	// console.log(index);
	// console.log(row);
};

// 中间
let rowArr1 = ref([
	{
		src: require("@/assets/screenImg/projectImg/center/pic1.png"),
		title: require("@/assets/screenImg/projectImg/center/text1.png"),
		value: 0,
		sign: "up",
		rate: 0,
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/projectImg/center/pic1.png"),
		title: require("@/assets/screenImg/projectImg/center/text2.png"),
		value: 0,
		sign: "up",
		rate: 0,
		unit: "个",
	},
]);
let getSign = function (i) {
	let img = ref({
		upImg: require("@/assets/screenImg/commonImg/up.png"),
		downImg: require("@/assets/screenImg/commonImg/down.png"),
	});
	if (i === "up") {
		return img.value.upImg;
	} else if (i === "down") {
		return img.value.downImg;
	}
};
let rowArr2 = ref([
	{
		src: require("@/assets/screenImg/projectImg/center/pic2.png"),
		title: require("@/assets/screenImg/projectImg/center/text3.png"),
		value: 0,
		sign: "normal",
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/projectImg/center/pic2.png"),
		title: require("@/assets/screenImg/projectImg/center/text4.png"),
		value: 0,
		sign: "normal",
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/projectImg/center/pic2.png"),
		title: require("@/assets/screenImg/projectImg/center/text5.png"),
		value: 0,
		sign: "normal",
		unit: "个",
	},
	{
		src: require("@/assets/screenImg/projectImg/center/pic3.png"),
		title: require("@/assets/screenImg/projectImg/center/text6.png"),
		value: 0,
		sign: "abnormal",
		unit: "个",
	},
]);

const fetchMiddleTop = () => {
	xmzl({ year: currentYear })
		.then((resp = {}) => {
			const {
				total = 0,
				total_rate = 0,
				keynote = 0,
				keynote_rate = 0,
				ongoing = 0,
				early = 0,
				normal = 0,
				abnormal = 0,
			} = resp || {};
			rowArr1.value[0].value = total;
			rowArr1.value[0].rate = Math.round(100 * total_rate);
			rowArr1.value[0].sign = +total_rate < 0 ? "down" : "up";
			rowArr1.value[1].value = keynote;
			rowArr1.value[1].rate = Math.round(100 * keynote_rate);
			rowArr1.value[1].sign = +keynote_rate < 0 ? "down" : "up";
			rowArr2.value[0].value = ongoing;
			rowArr2.value[1].value = early;
			rowArr2.value[2].value = normal;
			rowArr2.value[3].value = abnormal;
		})
		.catch((e) => {});
};

// 地图数据
let mapData = ref([]);
const fetchMapData = () => {
	dt()
		.then((resp = []) => {
			const formatted = resp.map((item) => {
				return {
					src: require("@/assets/screenImg/propertyImg/center/icon1.png"),
					lng: item["longitude"],
					lat: item["latitude"],
					name: item["project_name"],
				};
			});
			mapData.value.splice(0);
			mapData.value.push(...formatted);
		})
		.catch((e) => {});
};

//右侧
let rightData = ref({
	top: [
		{
			head: { title: "投资项目数量", value: 0 },
			content: [
				{
					title: "固投项目数",
					value: 0,
					type: "green",
				},
				{
					title: "股权项目数",
					value: 0,
					type: "yellow",
				},
				{
					title: "已完成投资数",
					value: 0,
				},
				{
					title: "重点项目数量",
					value: 0,
				},
			],
		},
		{
			head: { title: "计划投资数", value: 0 },
			content: [
				{
					title: "计划内项目数",
					value: 0,
				},
				{
					title: "计划外项目数",
					value: 0,
				},
				{
					title: "固投偏差项目数",
					value: 0,
				},
				{
					title: "风险点项目数",
					value: 0,
					type: "red",
				},
			],
		},
	],
	center: [
		{
			head: { title: "建设项目数量", value: 0 },
			content: [
				{
					title: "重点项目数量",
					value: 0,
				},
				{
					title: "预备状态项目数",
					value: 0,
				},
				{
					title: "未开始项目数",
					value: 0,
				},
				{
					title: "在建项目数",
					value: 0,
				},
				{
					title: "提前完成项目数",
					value: 0,
				},
				{
					title: "提前结束项目数",
					value: 0,
					type: "yellow",
				},
				{
					title: "逾期项目数",
					value: 0,
					type: "red",
				},
			],
		},
	],
	bottom: [
		{
			head: { title: "招标项目数量", value: 0 },
			content: [
				{
					title: "重点项目数量",
					value: 0,
				},
				{
					title: "已完成项目",
					value: 0,
				},
				{
					title: "开始中项目",
					value: 0,
				},
				{
					title: "进行中项目",
					value: 0,
				},
				{
					title: "中标项目数",
					value: 0,
				},
				{
					title: "流标项目数",
					value: 0,
					type: "red",
				},
			],
		},
	],
});

const projectChartRef = ref();
const screenChartObj = reactive({
	chart1: null,
});

const fetchRightTop1 = () => {
	tzjdqk({ year: currentYear })
		.then((resp) => {
			const {
				invest = 0,
				fixed = 0,
				shareholding = 0,
				completed = 0,
				keynote = 0,
				plan = 0,
				plan_inside = 0,
				plan_outside = 0,
				deviation = 0,
				risk_points = 0,
			} = resp || {};
			rightData.value.top[0].head.value = invest;
			rightData.value.top[0].content[0].value = fixed;
			rightData.value.top[0].content[1].value = shareholding;
			rightData.value.top[0].content[2].value = completed;
			rightData.value.top[0].content[3].value = keynote;
			rightData.value.top[1].head.value = plan;
			rightData.value.top[1].content[0].value = plan_inside;
			rightData.value.top[1].content[1].value = plan_outside;
			rightData.value.top[1].content[2].value = deviation;
			rightData.value.top[1].content[3].value = risk_points;
		})
		.catch((e) => {});
};
const fetchRightTop2 = () => {
	jsjdqk({ year: currentYear })
		.then((resp) => {
			const {
				construct = 0,
				keynote = 0,
				readiness = 0,
				not_started = 0,
				ongoing = 0,
				early_complete = 0,
				early_termination = 0,
				be_overdue = 0,
			} = resp || {};
			rightData.value.center[0].head.value = construct;
			rightData.value.center[0].content[0].value = keynote;
			rightData.value.center[0].content[1].value = readiness;
			rightData.value.center[0].content[2].value = not_started;
			rightData.value.center[0].content[3].value = ongoing;
			rightData.value.center[0].content[4].value = early_complete;
			rightData.value.center[0].content[5].value = early_termination;
			rightData.value.center[0].content[6].value = be_overdue;
		})
		.catch((e) => {});
};
const fetchRightTop3 = () => {
	zbjdqk({ year: currentYear })
		.then((resp) => {
			const {
				invite_tenders = 0,
				keynote = 0,
				completed = 0,
				starting = 0,
				ongoing = 0,
				successful_bidder = 0,
				failed_bidder = 0,
			} = resp || {};
			rightData.value.bottom[0].head.value = invite_tenders;
			rightData.value.bottom[0].content[0].value = keynote;
			rightData.value.bottom[0].content[1].value = completed;
			rightData.value.bottom[0].content[2].value = starting;
			rightData.value.bottom[0].content[3].value = ongoing;
			rightData.value.bottom[0].content[4].value = successful_bidder;
			rightData.value.bottom[0].content[5].value = failed_bidder;
		})
		.catch((e) => {});
};

const initAllCharts = () => {
	fetchLeftTop();
	fetchLeftTop2();
	fetchLeftTop3();
	fetchSelectOptions();
	fetchLeftTop4();
	fetchMiddleTop();
	fetchMapData();

	fetchRightTop1();
	fetchRightTop2();
	fetchRightTop3();
};

const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		// echarts调整size
		projectChartRef.value.resizeChart();
	}
};
onMounted(() => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;
		// initAllCharts();
		window.addEventListener("resize", screenResize);

		nextTick(() => {
			initAllCharts();
			tableHeight.value = calcHeight("table-box");
		});
	}
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
	Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>
<style lang="scss" scoped>
@import "./projectStyle.scss";
</style>
